import React, {PureComponent} from 'react';
import style from './Emoji.module.css'
import filterEmoji from '../utils/filterEmoji';
import Clipboard from 'clipboard';
//clipboard
// 第一步 : 引入这个包
// 第二步 : 初始化 指定一个类名
// 第三步 : 写类的标签中写一个自定义属性 data-clipboard-text = 想复制的值
// 第四步 : 销毁

class Emoji extends PureComponent {
  state = {
    searchText: '',
    clipIndex: -1
  };

  componentDidMount() {
    //初始化 类
    this.clipboard = new Clipboard('.copy');
  }

  componentWillUnmount() {
    this.clipboard.destroy();
  }

  render() {
    return (
      <div>
        <input type="text" className={style.input} onChange={(ev) => {
          this.setState({
            searchText: ev.target.value
          })
        }}/>
        <ul className={style.list}>
          {
            filterEmoji(this.state.searchText, 20).map((item, index) => {
              return (
                <li className={`${this.state.clipIndex === index ? style.active : ''} copy`}
                    data-clipboard-text={item.symbol}
                    key={item.title}
                    onClick={() => {
                      // this.setState({
                      //   clipIndex: index
                      // })
                    }}
                >
                  <span className={style.symbol}>{item.symbol}</span>
                  <span>&nbsp;&nbsp;&nbsp;&nbsp;{item.title}</span>
                  <span className={style.copyText} style={{float:'right',color:'#ef9db2',fontSize:'30px'}}>点击复制</span>
                </li>)
            })
          }
        </ul>
      </div>
    );
  }
}

export default Emoji;
